<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one
  ~ or more contributor license agreements.  See the NOTICE file
  ~ distributed with this work for additional information
  ~ regarding copyright ownership.  The ASF licenses this file
  ~ to you under the Apache License, Version 2.0 (the
  ~ "License"); you may not use this file except in compliance
  ~ with the License.  You may obtain a copy of the License at
  ~
  ~   http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing,
  ~ software distributed under the License is distributed on an
  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  ~ KIND, either express or implied.  See the License for the
  ~ specific language governing permissions and limitations
  ~ under the License.
  -->

<div>
  <div nz-row>
    <div nz-col nzSpan="24">
      <div nz-col nzXl="12" nzXXl="6" style="padding-right: 4px; padding-left: 4px; height: 200px;">
        <nz-card nzTitle="Session" [nzExtra]="sessionExplanation" style="height: 188px;">
          <nz-statistic
            [nzValue]="numRunningSession | number"
            [nzTitle]="'Running'"
            [nzValueStyle]="{ color: '#1890ff' }"
          ></nz-statistic>
        </nz-card>
        <ng-template #sessionExplanation>
          <a nz-icon nzType="info-circle"></a>
        </ng-template>
      </div>
      <div nz-col nzXl="12" nzXXl="6" style="padding-right: 4px; padding-left: 4px; height: 200px;">
        <nz-card nzTitle="Job" [nzExtra]="jobExplanation" style="height: 188px;">
          <nz-statistic
            [nzValue]="numRunningJob | number"
            [nzTitle]="'Running'"
            [nzValueStyle]="{ color: '#1890ff' }"
          ></nz-statistic>
        </nz-card>
        <ng-template #jobExplanation>
          <a nz-icon nzType="info-circle"></a>
        </ng-template>
      </div>
      <div nz-col nzXl="12" nzXXl="6" style="padding-right: 4px; padding-left: 4px; height: 200px;">
        <nz-card nzTitle="GPU / CPU" [nzExtra]="GpuCpuExplanation" style="height: 188px;">
          <div nz-col nzSpan="24">
            <p>GPU</p>
            <nz-progress [nzPercent]="usedGPUpercent"></nz-progress>
          </div>
          <div nz-col nzSpan="24" style="padding-top: 5px;">
            <p>CPU</p>
            <nz-progress [nzPercent]="usedCPUpercent"></nz-progress>
          </div>
        </nz-card>
        <ng-template #GpuCpuExplanation>
          <a nz-icon nzType="info-circle"></a>
        </ng-template>
      </div>
      <div nz-col nzXl="12" nzXXl="6" style="padding-right: 4px; padding-left: 4px; height: 200px;">
        <nz-card nzTitle="Memory(GB)" [nzExtra]="memoryExplanation" style="height: 188px;">
          <div nz-col nzSpan="24">
            <div nz-col nzSpan="8">
              <nz-statistic [nzValue]="usedMemory" [nzTitle]="'Used(GB)'"></nz-statistic>
            </div>
            <div nz-col nzSpan="8">
              <nz-statistic [nzValue]="totalMemory" [nzTitle]="'Total(GB)'"></nz-statistic>
            </div>
            <div nz-col nzSpan="8">
              <nz-statistic
                [nzValue]="usedMemoryPercent | number: '1.0-1'"
                [nzTitle]="'Used(%)'"
                [nzSuffix]="'%'"
                [nzValueStyle]="{ color: '#1890ff' }"
              ></nz-statistic>
            </div>
          </div>
          <div nz-col nzSpan="24" style="padding-top: 5px;">
            <nz-progress [nzPercent]="usedMemoryPercent | number: '1.0-1'"></nz-progress>
          </div>
        </nz-card>
        <ng-template #memoryExplanation>
          <a nz-icon nzType="info-circle"></a>
        </ng-template>
      </div>
    </div>
  </div>
</div>
<div nz-row>
  <div nz-col nzXl="24" nzXXl="16">
    <div nz-col nzSpan="24" style="height: 200px; padding-left: 4px; padding-right: 4px;">
      <nz-card nzTitle="Quick Start" style="height: 200px;">
        <div style="padding: 10px;">
          <div nz-col nzSpan="24" style="height: 50px; font-size: 16px;">
            <div nz-col nzSpan="6">
              <i nz-icon nzType="book" nzTheme="outline"></i>
              <a>New Notebook</a>
            </div>
            <div nz-col nzSpan="6">
              <i nz-icon nzType="rocket" nzTheme="outline"></i>
              <a>New Session</a>
            </div>
            <div nz-col nzSpan="6">
              <i nz-icon nzType="cluster" nzTheme="outline"></i>
              <a>New Job</a>
            </div>
            <div nz-col nzSpan="6">
              <i nz-icon nzType="bar-chart" nzTheme="outline"></i>
              <a>New Data</a>
            </div>
          </div>
          <div nz-col nzSpan="24" style="height: 50px; font-size: 16px;">
            <div nz-col nzSpan="6">
              <i nz-icon nzType="experiment" nzTheme="outline"></i>
              <a>New Model</a>
            </div>
            <div nz-col nzSpan="6">
              <i nz-icon nzType="calculator" nzTheme="outline"></i>
              <a>New Experiment</a>
            </div>
          </div>
        </div>
      </nz-card>
    </div>
    <div nz-col nzSpan="24">
      <div style="padding-top: 12px; padding-left: 4px; padding-right: 4px; padding-bottom: 12px;">
        <nz-card nzTitle="Open Recent">
          <div
            nz-col
            nzSpan="12"
            style="height: 120px; padding-left: 4px; padding-right: 4px;"
            *ngFor="let displayOpenRecentListItem of displayOpenRecentList"
          >
            <nz-card nzHoverable style="height: 114px;">
              <nz-card-meta
                [nzTitle]="displayOpenRecentListItem.title"
                [nzDescription]="displayOpenRecentListItem.description"
                [nzAvatar]="avatarTemplate"
              ></nz-card-meta>
            </nz-card>
            <ng-template #avatarTemplate>
              <nz-avatar [nzSrc]="displayOpenRecentListItem.avatarType"></nz-avatar>
            </ng-template>
          </div>
          <div nz-col nzSpan="24" style="position: relative; padding-top: 15px;">
            <div style="position: absolute; left: 50%; margin-right: -50%; transform: translate(-50%, -50%);">
              <nz-pagination
                [nzPageSize]="openRecentPageSize"
                [nzPageIndex]="openRecentPageIndex"
                [nzTotal]="openRecentList.length"
                nzSimple
                (nzPageIndexChange)="openRecentChangePage($event)"
              ></nz-pagination>
            </div>
          </div>
        </nz-card>
      </div>
    </div>
  </div>
  <div nz-col nzXl="24" nzXXl="8">
    <div nz-col nzSpan="24" style="padding-left: 4px; padding-right: 4px;">
      <nz-card nzTitle="What's news?" [nzExtra]="extraTemplate">
        <div style="height: 120px;" *ngFor="let displayNewsListItem of displayNewsList">
          <nz-card nzHoverable style="height: 114px;">
            <nz-card-meta
              [nzTitle]="displayNewsListItem.title"
              [nzDescription]="displayNewsListItem.newsTime | date: 'medium'"
              [nzAvatar]="newsAvatarTemplate"
            ></nz-card-meta>
          </nz-card>
          <ng-template #newsAvatarTemplate>
            <nz-avatar nzIcon="user"></nz-avatar>
          </ng-template>
        </div>
        <div style="position: relative; padding-top: 15px;">
          <div style="position: absolute; left: 50%; margin-right: -50%; transform: translate(-50%, -50%);">
            <nz-pagination
              [nzPageSize]="newsPageSize"
              [nzPageIndex]="newsPageIndex"
              [nzTotal]="newsList.length"
              nzSimple
              (nzPageIndexChange)="newsChangePage($event)"
            ></nz-pagination>
          </div>
        </div>
      </nz-card>
      <ng-template #extraTemplate>
        <a>More</a>
      </ng-template>
    </div>
  </div>
</div>
